<template>
  <div class="user-edit">
    <Drawer :title="title" v-model="visible" width="1024" :mask-closable="false">
      <Scroll :height="height">
        <div style="width: 98%">
          <div style="background-color: rgba(139,139,139,0.6); font-size: 18px;font-family: '宋体';">
            <div style="width: 95%;background-color: #ffffff;margin: 0 auto;">
              <div class="paperStyle">
                <div style="margin: 42px 36px;line-height: 34px;font-family: 'fangsong';font-size:16px;color: #000;"  id="page_content">
                  <div class="text-title"><h2>10KV及以下电网建设与改造劳务分包合同</h2></div>
                  <div class="text-content">
                　  <p>为了切实加强电网新建改造工程管理，明确责任，确保施工工期和工程质量，根据《中华人民共和国经济合同法》的规定，经双方协商一致，签订本合同。以资共同遵守。</p>
                    <p><b>一、订立合同单位</b></p>
                    <p>发包单位（以下简称甲方）：{{ contractForm.part_b.name }}</p>
                    <p>承包单位（以下简称乙方）：{{ contractForm.part_a.name }}</p>
                    <p><b>二、工程概况</b></p>
                    <p>1. 工程名称：{{ contractForm.contract.project_name }}</p>
                    <p>2. 工程性质：{{ contractForm.contract.type }}</p>
                    <p>3. 工程规模和范围：</p>
                    <p>{{ contractForm.contract.situation }}</p>
                    <p><b>三、工程发包方式</b></p>
                    <p>{{ contractForm.contract.awardname }}。</p>
                    <p><b>四、劳务分包价格</b></p>
                    <p>1. 经双方商定：工程分包施工费用按<u>{{contractForm.contract.contract_cost_big}} (￥{{contractForm.contract.cost}})</u>结算。</p>
                    <p>2. 若出现下列情况之一者，经双方商定调整工程造价：</p>
                    <p>2.1 设计变更及新增加的工程量。</p>
                    <p>2.2 人力不可抗拒的自然灾害的影响。</p>
                    <p>3. 工程完结后，乙方以{{ contractForm.contract.tax_race }}%税率给甲方开具{{ contractForm.contract.ticket }}。</p>
                    <p><b>五、施工工期</b></p>
                    <p> {{ contractForm.contract.start_date_cn }}  至  {{ contractForm.contract.end_date_cn }}</p>
                    <p>若发生第四条规定情况之一者，经双方商定，工期相应调整：</p>
                    <p><b>六、双方主要责任</b></p>
                    <p>1. 甲方主要责任：</p>
                    <p>1.1 组织施工现场勘测，进行施工图交底；</p>
                    <p>1.2 按照合同要求拨付工程施工费；</p>
                    <p>1.3 负责设备、材料的按时供应；</p>
                    <p>1.4 负责和当地政府就青苗、障碍等问题的协调；</p>
                    <p>1.5 提供经审定的施工图两份；</p>
                    <p>1.6 配合乙方解决施工中出现的问题；</p>
                    <p>1.7 负责停、送电工作的执行或联系。</p>
                    <p>2. 乙方主要责任：</p>
                    <p>2.1 严格按照施工图文件规程、规范要求，精心组织施工，确保工程质量和进度；</p>
                    <p>2.2 负责上报开、竣工报告；</p>
                    <p>2.3 负责及时上报施工中出现的问题；</p>
                    <p>2.4 参加竣工验收；</p>
                    <p>2.5 工程竣工后及时向甲方上报结算书；</p>
                    <p>2.6 工程竣工后及时办理工程竣工资料移交。</p>
                    <p><b>七、工程质量及检验</b></p>
                    <p>1. 甲方按照施工图、设计变更通知和规程、规范要求组织检查和验收。</p>
                    <p>2. 隐蔽工程在覆盖前，乙方应通知甲方验收签证后，方可进行下一步工序施工。</p>
                    <p>3. 工程竣工后，乙方应向甲方递交验收申请和移交全部技术资料及竣工图纸各一套，甲方在接到申请后及时组织验收。</p>
                    <p>4. 验收过程中发现的缺陷，乙方必须在三日之内进行处理，并经甲方认可签字，否则不能进行工程结算。</p>
                    <p>5. 工程竣工验收后，承包方按规定对工程实行保修，保修时间自通过验收之日算起一年。</p>
                    <p><b>八、工程费用支付与结算：</b></p>
                    <p>1. 合同签订生效后，拨付合同总价的{{ contractForm.contract.race }}%，其余视工程进展情况拨付。</p>
                    <p>2. 工程完工验收后，一次性付给承包方合同金额的剩余款项。</p>
                    <p><b>九、违约与仲裁</b></p>
                    <p>1. 违约：</p>
                    <p>由单方原因造成合同不能履行或不能完全履行，由责任方承担违约责任；由于双方原因，根据实际情况，由双方分别承担各自应负的违约责任。</p>
                    <p>2. 仲裁：</p>
                    <p>执行合同中，发生矛盾或经济纠纷，双方应本着实事求是的精神，协商解决或由协议约定单位调解，调解无效，任何一方均可向经济合同仲裁部门申请仲裁，直至向法院提请诉讼。</p>
                    <p><b>十、本合同经双方签字盖章后生效，工程竣工验收，双方结算并全部付清承包款后，合同自行终止。</b> </p>
                    <p>本合同{{bigNumber[1]}}式{{bigNumber[contractForm.contract.total]}}份，其中甲方{{bigNumber[contractForm.contract.part_a_count]}}份、
                      乙方{{bigNumber[contractForm.contract.part_b_count]}}份。</p>
                    <p><b>十一、本合同中未尽事宜，由双方协商，形成补充协议，其协议与本合同具有同等法律效力。</b></p>
                    <br/>
                  </div>

                  <table>
                    <tr>
                      <td width='5%'></td>
                      <td width='42%'>
                        <div class="height100">甲方（盖章）</div>
                        <div>代表（签字）</div>
                        <div class="height50" >地址：{{ contractForm.part_b.address }}</div>
                        <div>电话：{{ contractForm.part_b.mobile }}</div>
                        <div class="height50">开户银行：{{ contractForm.part_b.bank_name }}</div>
                        <div>银行帐号：{{ contractForm.part_b.bank_account }}</div>
                        <div>纳税人识别号：{{ contractForm.part_b.credit_code }}</div>
                      </td>
                      <td width='10%'></td>
                      <td width='43%'>
                        <div class="height100">乙方（盖章）</div>
                        <div>代表（签字）</div>
                        <div class="height50" >地址：{{ contractForm.part_a.address }}</div>
                        <div>电话：{{ contractForm.part_a.mobile }}</div>
                        <div class="height50">开户银行：{{ contractForm.part_a.bank_name }}</div>
                        <div>银行帐号：{{ contractForm.part_a.bank_account }}</div>
                        <div>纳税人识别号：{{ contractForm.part_a.credit_code }}</div>
                      </td>
                    </tr>
                    <tr>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td>签订日期： {{ contractForm.contract.contract_date_cn }}</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Scroll>
      <div class="demo-drawer-footer">
        <Button @click="handleCancel" style="margin-right: 36px;">关闭</Button>
        <Button type="primary" :loading="submitLoading" @click="printHtml">打印</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import { moneyToBig } from '@/libs/function';
import moment from 'moment';
import printJS from 'print-js';
export default {
  name: 'view-project-contract',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    },
  },
  data() {
    return {
      visible: this.value,
      title: '',
      height: 540,
      submitLoading: false,
      contractForm: {},
      bigNumber: [
        '零','壹','贰','叁','肆','伍','陆','柒','捌','玖','拾'
      ],
    }
  },
  methods: {
    init() {
      this.title = '查看劳务分包合同';
      this.contractForm = this.data;
      this.contractForm.contract.contract_cost_big = moneyToBig(this.data.contract.cost);
      this.contractForm.contract.first_pay_big = moneyToBig(this.data.contract.first_pay);
      this.contractForm.contract.contract_date_cn = moment(this.data.contract.contract_date).format('YYYY年MM月DD日');
      this.contractForm.contract.start_date_cn = moment(this.data.contract.start_date).format('YYYY年MM月DD日');
      this.contractForm.contract.end_date_cn = moment(this.data.contract.end_date).format('YYYY年MM月DD日');
    },
    handleCancel() {
      this.visible = false;
    },
    printHtml() {
      let options = {
        printable: 'page_content',
        type: 'html',
        scanStyles: false,
        style: `.cover-content{
                  text-indent: 160px;
                  margin-bottom: 15px;
                }
                .text-title{
                  text-align: center;
                  font-family: '微软雅黑';
                } 
                .text-content{
                  
                }
                .text-content p{
                  text-indent: 36px;
                  font-size: 18px;
                  margin-bottom: 1px;
                  margin-top: 1px;
                  padding-top: 1px;
                  padding-bottom: 1px;
                }
                .paperStyle {
                  border: solid 1px #bdbdbd;
                  margin: 24px auto;
                }
                .height100{
                  height: 100px;
                }
                .height50{
                  height: 50px;
                  line-height: 22px;
                }`
      };
      printJS(options);
      // printJS("page_content", "html");
    },
    setCurrentValue(value) {
      this.visible = value;
    },
    
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.init();
      this.$emit("input", value);
      
    }
  },
  mounted() {
    this.height = Number(document.documentElement.clientHeight - 100);
  }
}
</script>
<style lang="less" scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.cover-content{
  text-indent: 160px;
  margin-bottom: 15px;
}
.text-title{
  text-align: center;
  font-family: '微软雅黑'
} 
.text-content{
  margin: 46px 46px;
}
.text-content p{
  text-indent: 36px;
  font-size: 18px;
  margin-bottom: 1px;
  margin-top: 1px;
  padding-top: 1px;
  padding-bottom: 1px;
}
.paperStyle {
  border: solid 1px #bdbdbd;
  margin: 24px auto;
}
.height100{
  height: 100px;
}
.height50{
  height: 50px;
  line-height: 22px;
}
</style>